<!--无限极左侧菜单-->
<div class="left-menu-panel">
    <div class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">分类浏览</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的最近浏览</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我关注的客户</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的客户[已签约]</span>
                        <span class="layui-badge">2</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的客户[开发中]</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">所有客户[已签约]</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">客户收藏夹</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">目前重要客户</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">开发中客户</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">自己主客户</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">订单搜索器</a>
        </li>
    </div>
</div>
<div class="right-panel layuimini-page-anim">
    <form class="layui-form layui-user-from" method="post">
        <div class="layui-row">
            <div class="layui-col-md3 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="id"   placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="contactName" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人</label>
                    <div class="layui-input-block layui-input-space5">
                        <div class="layui-col-md6">
                            <select name="user">
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <input type="text" name="director"  placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">公司类型</label>
                    <div class="layui-input-block">
                        <select name="time">
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block layui-input-space5">
                        <div class="layui-col-md6">
                            <select name="user">
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <select name="user">
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">城市</label>
                    <div class="layui-input-block">
                            <select name="city"  lay-search>
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                    </div>
                </div>
            </div>
           <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户</label>
                    <div class="layui-input-block layui-input-space5">
                        <div class="layui-col-md6">
                            <select name="user" >
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <select name="user" >
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">多久未联系</label>
                    <div class="layui-input-block">
                        <select name="user"  lay-search>
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">其他</label>
                    <div class="layui-input-block layui-input-space5">
                        <div class="layui-col-md6">
                            <select name="user">
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <input type="text" name="director"  placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-bg-lightblue" lay-submit lay-filter="candidateSearch">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">清空</button>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter" lay-skin="line"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="getCheckData">加入收藏</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="getCheckLength"><i class="fa fa-th-large"></i> 更多功能</button>
    </div>
</script>


<script type="text/html" id="statusTableBar">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-orange">重点客户</button>
    {{#  } }}
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs">试单客户</button>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <button class="layui-btn layui-btn-xs layui-bg-red">准备签约</button>
    {{#  } }}
    {{#  if(d.status == 3){ }}
    <button class="layui-btn layui-btn-xs layui-bg-blue">电话沟通</button>
    {{#  } }}
    {{#  if(d.status == 4){ }}
    <button class="layui-btn layui-btn-xs layui-bg-blue">准备拜访</button>
    {{#  } }}
    {{#  if(d.status == 5){ }}
    <button class="layui-btn layui-btn-xs layui-bg-cyan">无意向</button>
    {{#  } }}
    {{#  if(d.status == 6){ }}
    <button class="layui-btn layui-btn-xs layui-bg-black">合作暂停</button>
    {{#  } }}
    {{#  if(d.status == 7){ }}
    <button class="layui-btn layui-btn-xs layui-bg-black">黑名单</button>
    {{#  } }}
    {{#  if(d.status == 8){ }}
    <button class="layui-btn layui-btn-xs layui-bg-gray">无状态</button>
    {{#  } }}
</script>

<script type="text/html" id="clientType">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-orange">国有</button>
    {{#  } }}
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs">私营</button>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <button class="layui-btn layui-btn-xs">私营</button>
    {{#  } }}
</script>
<script>
    layui.use(['layer','form', 'table','miniPage','element', 'laydate'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            laydate = layui.laydate;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#dateRange'
            ,range: true
        });

        /**
         * 数据快速查看
         **/
        var tableIns = table.render({
            elem: '#currentTableId',
            url: 'api/customer/index.json',
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [],
            skin: 'line',
            cols: [
                [
                {type:'checkbox', fixed: 'left'},
                {field: 'id', align:'center', title: '客户编号', sort: true,templet: function(d){
                        return '<span style="margin-right: 10px;"><i class="fa fa-paperclip"></i> 0</span>' +
                            '<span style="margin-right: 20px;"><i class="fa fa-comment-o"></i> 0</span>' +
                            '<span>'+ d.id +'</span>'
                    }
                },
                {field: 'clientName', title: '客户名称', templet: function(d){
                        return '<a href="javascrpt:;" layuimini-href="'+ d.url +'" class="color-blue">'+ d.clientName +'</a>'
                    }
                },
                {field: 'clientType', align:'center',  title: '客户类型',templet: '#clientType'},
                {field: 'teamId', align:'center',  title: '部门编号',sort: true},
                {field: 'email', align:'center',  title: '邮箱'},
                {field: 'ownerBy', align:'center',  title: '客户负责人'},
                {field: 'clientStatus',title: '客户状态'},
                {field: 'createTime',  title: '创建日期'},
                {field: 'createBy',  title: '创建者'},
                {title: '操作',  fixed: "right", align: "center", templet: function(d){
                        return '<button class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-align-justify"></i></span>';
                    }
                }
            ]
            ],
            page: true, //开启分页
            request: {
                pageName: 'pageIndex', // page
                limitName: 'pageSize' // limit
            }
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
        });

        /*$('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });*/

        form.on('submit(candidateSearch)', function(data){
            data.field.pageIndex = 1;
                tableIns.reload({
                where: data.field
            });
            return false;
        });
        /*var  active = {
            reload: function () {

                var formData = [];
                var t = $('#searchForm').serializeArray();
                $.each(t, function() {
                    formData[this.name] = this.value;
                });
                console.log(formData.join(','));
                console.log(formData);
                console.log(JSON.stringify(formData));
                tableIns.reload({
                    where: {
                        formData
                    }
                });
            }
        };*/

    });
</script>
